<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>车机压测APP - 原型图展示</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>
        .page-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2rem;
            padding: 2rem;
        }
        
        .page-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: white;
            border-radius: 1rem;
            padding: 1.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .page-title {
            font-size: 1.25rem;
            font-weight: bold;
            margin-bottom: 1rem;
            color: #333;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .iphone-frame-small {
            transform: scale(0.8);
            transform-origin: top center;
            margin-bottom: -160px; /* 调整底部间距 */
        }
        
        /* 主页面卡片内弹窗展示区样式 */
        .home-popup-section {
            width: 100%;
            margin-top: 1rem;
            padding: 1rem;
            background-color: #f8f9fa;
            border-radius: 0.75rem;
        }
        
        .popup-title {
            font-size: 1.25rem;
            font-weight: bold;
            margin-bottom: 1rem;
            color: #333;
            text-align: center;
        }
        
        .popup-grid {
            display: grid;
            /* 修改这里：将每行显示两个弹窗改为每行显示一个弹窗 */
            grid-template-columns: 1fr;
            gap: 1rem;
        }
        
        .popup-card {
            background-color: white;
            border-radius: 0.75rem;
            padding: 1rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
        }
        
        .popup-card-title {
            font-size: 1rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
            color: #333;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .popup-card-desc {
            font-size: 0.85rem;
            color: #666;
            margin-bottom: 0.75rem;
        }
        
        .popup-preview {
            background-color: #f1f5f9;
            border-radius: 0.5rem;
            padding: 0.75rem;
            flex-grow: 1;
            min-height: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        .popup-preview img {
            max-width: 100%;
            max-height: 160px;
            object-fit: contain;
            border-radius: 0.5rem;
            border: 1px solid #e2e8f0;
        }
        
        /* 模拟滑块样式 */
        .slider {
            -webkit-appearance: none;
            height: 8px;
            border-radius: 4px;
            background: #4B5563;
            outline: none;
        }
        
        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #3B82F6;
            cursor: pointer;
        }
        
        .slider::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #3B82F6;
            cursor: pointer;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <header class="bg-white shadow-md p-4">
        <div class="container mx-auto">
            <h1 class="text-2xl font-bold text-center">车机压测APP - 原型图展示</h1>
        </div>
    </header>
    
    <div class="page-grid">
        <!-- 主界面卡片 -->
        <div class="page-card">
            <div class="page-title">
                <i class="fas fa-home"></i>
                主界面
            </div>
            <div class="iphone-frame iphone-frame-small">
                <div class="iphone-screen">
                    <iframe src="home.html" class="w-full h-full border-0 rounded-3xl"></iframe>
                </div>
            </div>
            
            <!-- 主页面弹窗展示区（放置在主页面模块内部） -->
            <div class="home-popup-section">
                <div class="popup-title">主页面弹窗</div>
                <div class="popup-grid">
                    <!-- 录制时长设置弹窗 -->
                    <div class="popup-card">
                        <div class="popup-card-title">
                            <i class="fas fa-clock text-blue-500"></i>
                            录制时长设置弹窗
                        </div>
                        <div class="popup-card-desc">点击主页面底部的"录制时长"选项时弹出</div>
                        <div class="popup-preview">
                            <div class="bg-gray-800 rounded-xl p-4 w-full max-w-xs">
                                <div class="text-center mb-3">
                                    <div class="text-xl font-bold mb-2 text-white">录制时长设置</div>
                                    <div class="text-sm text-gray-300">设置单次录制的时长</div>
                                </div>
                                
                                <div class="space-y-3">
                                    <div class="flex items-center justify-between">
                                        <span class="text-sm text-gray-300">录制时长</span>
                                        <span class="text-blue-400 font-semibold">25秒</span>
                                    </div>
                                    <input type="range" min="10" max="60" value="25" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider">
                                    <div class="flex justify-between text-xs text-gray-400">
                                        <span>10秒</span>
                                        <span>60秒</span>
                                    </div>
                                </div>
                                
                                <div class="flex justify-center space-x-4 mt-4">
                                    <button class="px-4 py-2 bg-gray-700 rounded-lg text-sm font-medium hover:bg-gray-600 transition-all">取消</button>
                                    <button class="px-4 py-2 bg-blue-600 rounded-lg text-sm font-medium hover:bg-blue-500 transition-all">确定</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 车机类型选择弹窗 -->
                    <div class="popup-card">
                        <div class="popup-card-title">
                            <i class="fas fa-tv text-purple-500"></i>
                            车机类型选择弹窗
                        </div>
                        <div class="popup-card-desc">点击主页面底部的"检测区域"选项时弹出</div>
                        <div class="popup-preview">
                            <div class="bg-gray-800 rounded-xl p-4 w-full max-w-xs">
                                <div class="text-center mb-3">
                                    <div class="text-xl font-bold mb-2 text-white">选择车机类型</div>
                                    <div class="text-sm text-gray-300">请选择您要测试的车机类型</div>
                                </div>
                                
                                <div class="space-y-3">
                                    <button class="w-full bg-gray-700 hover:bg-blue-600 border border-gray-600 rounded-lg px-4 py-3 text-left transition-all">
                                        <div class="font-semibold text-white">单屏车机</div>
                                        <div class="text-sm text-gray-400">仅检测一个区域</div>
                                    </button>
                                    <button class="w-full bg-blue-600 border border-blue-500 rounded-lg px-4 py-3 text-left transition-all">
                                        <div class="font-semibold text-white">双联屏车机</div>
                                        <div class="text-sm text-gray-400">检测仪表盘和MDU两个区域</div>
                                    </button>
                                    <button class="w-full bg-gray-700 hover:bg-blue-600 border border-gray-600 rounded-lg px-4 py-3 text-left transition-all">
                                        <div class="font-semibold text-white">三联屏车机</div>
                                        <div class="text-sm text-gray-400">检测三个区域</div>
                                    </button>
                                </div>
                                
                                <div class="flex justify-center space-x-4 mt-4">
                                    <button class="px-4 py-2 bg-gray-700 rounded-lg text-sm font-medium hover:bg-gray-600 transition-all">取消</button>
                                    <button class="px-4 py-2 bg-blue-600 rounded-lg text-sm font-medium hover:bg-blue-500 transition-all">确定</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="popup-grid mt-4">
                    <!-- 名称编辑弹窗 -->
                    <div class="popup-card">
                        <div class="popup-card-title">
                            <i class="fas fa-edit text-green-500"></i>
                            区域名称编辑弹窗
                        </div>
                        <div class="popup-card-desc">长按检测区域框时弹出</div>
                        <div class="popup-preview">
                            <div class="bg-gray-800 rounded-xl p-4 w-full max-w-xs">
                                <div class="text-center mb-3">
                                    <div class="text-xl font-bold mb-2 text-white">编辑区域名称</div>
                                    <div class="text-sm text-gray-300 mb-2">仪表盘区域</div>
                                </div>
                                
                                <div class="space-y-3">
                                    <div>
                                        <label class="block text-sm text-gray-300 mb-2">区域名称</label>
                                        <input type="text" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white focus:border-blue-400 focus:outline-none" placeholder="请输入区域名称" value="仪表盘">
                                    </div>
                                    
                                    <div>
                                        <label class="block text-sm text-gray-300 mb-2">R (红色)</label>
                                        <input type="range" min="0" max="255" value="96" class="w-full h-2 bg-red-700 rounded-lg appearance-none cursor-pointer slider">
                                        <div class="flex justify-between text-xs text-gray-400 mt-1">
                                            <span>0</span>
                                            <span>96</span>
                                            <span>255</span>
                                        </div>
                                    </div>
                                    
                                    <div>
                                        <label class="block text-sm text-gray-300 mb-2">G (绿色)</label>
                                        <input type="range" min="0" max="255" value="165" class="w-full h-2 bg-green-700 rounded-lg appearance-none cursor-pointer slider">
                                        <div class="flex justify-between text-xs text-gray-400 mt-1">
                                            <span>0</span>
                                            <span>165</span>
                                            <span>255</span>
                                        </div>
                                    </div>
                                    
                                    <div>
                                        <label class="block text-sm text-gray-300 mb-2">B (蓝色)</label>
                                        <input type="range" min="0" max="255" value="250" class="w-full h-2 bg-blue-700 rounded-lg appearance-none cursor-pointer slider">
                                        <div class="flex justify-between text-xs text-gray-400 mt-1">
                                            <span>0</span>
                                            <span>250</span>
                                            <span>255</span>
                                        </div>
                                    </div>
                                    
                                    <div>
                                        <label class="block text-sm text-gray-300 mb-2">十六进制颜色</label>
                                        <input type="text" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white focus:border-blue-400 focus:outline-none" value="#60A5FA">
                                    </div>
                                    
                                    <div class="flex items-center justify-center">
                                        <div class="w-16 h-16 rounded-lg border border-gray-600" style="background-color: #60A5FA"></div>
                                    </div>
                                </div>
                                
                                <div class="flex justify-center space-x-4 mt-4">
                                    <button class="px-4 py-2 bg-gray-700 rounded-lg text-sm font-medium hover:bg-gray-600 transition-all">取消</button>
                                    <button class="px-4 py-2 bg-blue-600 rounded-lg text-sm font-medium hover:bg-blue-500 transition-all">保存</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 自定义提示弹窗 -->
                    <div class="popup-card">
                        <div class="popup-card-title">
                            <i class="fas fa-exclamation-circle text-yellow-500"></i>
                            自定义提示弹窗
                        </div>
                        <div class="popup-card-desc">用于显示各种操作提示和确认信息</div>
                        <div class="popup-preview">
                            <div class="bg-gray-800 rounded-xl p-4 w-full max-w-xs">
                                <div class="text-center mb-4">
                                    <i class="fas fa-exclamation-triangle text-yellow-500 text-xl mb-2"></i>
                                    <div class="text-xl font-bold mb-2 text-white">提示</div>
                                    <div class="text-sm text-gray-300">确定要执行此操作吗？</div>
                                </div>
                                <div class="flex justify-center space-x-4">
                                    <button class="px-4 py-2 bg-gray-700 rounded-lg text-sm font-medium hover:bg-gray-600 transition-all">取消</button>
                                    <button class="px-4 py-2 bg-blue-600 rounded-lg text-sm font-medium hover:bg-blue-500 transition-all">确定</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 设置卡片 -->
        <div class="page-card">
            <div class="page-title">
                <i class="fas fa-cog"></i>
                设置
            </div>
            <div class="iphone-frame iphone-frame-small">
                <div class="iphone-screen">
                    <iframe src="settings.html" class="w-full h-full border-0 rounded-3xl"></iframe>
                </div>
            </div>
            
            <!-- 设置页面弹窗展示区 -->
            <div class="home-popup-section">
                <div class="popup-title">设置页面弹窗</div>
                <div class="popup-grid">
                    <!-- 保存成功弹窗 -->
                    <div class="popup-card">
                        <div class="popup-card-title">
                            <i class="fas fa-check-circle text-green-500"></i>
                            保存成功弹窗
                        </div>
                        <div class="popup-card-desc">点击设置页面底部的"保存设置"按钮后显示</div>
                        <div class="popup-preview">
                            <div class="bg-gray-800 rounded-xl p-4 w-full max-w-xs">
                                <div class="text-center mb-4">
                                    <i class="fas fa-check-circle text-green-500 text-xl mb-2"></i>
                                    <div class="text-xl font-bold mb-2 text-white">保存成功</div>
                                    <div class="text-sm text-gray-300">设置已成功保存</div>
                                </div>
                                <div class="flex justify-center">
                                    <button class="px-4 py-2 bg-blue-600 rounded-lg text-sm font-medium hover:bg-blue-500 transition-all">确定</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 保存失败弹窗 -->
                    <div class="popup-card">
                        <div class="popup-card-title">
                            <i class="fas fa-times-circle text-red-500"></i>
                            保存失败弹窗
                        </div>
                        <div class="popup-card-desc">保存设置失败时显示</div>
                        <div class="popup-preview">
                            <div class="bg-gray-800 rounded-xl p-4 w-full max-w-xs">
                                <div class="text-center mb-4">
                                    <i class="fas fa-times-circle text-red-500 text-xl mb-2"></i>
                                    <div class="text-xl font-bold mb-2 text-white">保存失败</div>
                                    <div class="text-sm text-gray-300">设置保存失败，请重试</div>
                                </div>
                                <div class="flex justify-center">
                                    <button class="px-4 py-2 bg-blue-600 rounded-lg text-sm font-medium hover:bg-blue-500 transition-all">确定</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 历史记录卡片 -->
        <div class="page-card">
            <div class="page-title">
                <i class="fas fa-history"></i>
                历史记录
            </div>
            <div class="iphone-frame iphone-frame-small">
                <div class="iphone-screen">
                    <iframe src="history.html" class="w-full h-full border-0 rounded-3xl"></iframe>
                </div>
            </div>
            
            <!-- 历史记录页面弹窗展示区 -->
            <div class="home-popup-section">
                <div class="popup-title">历史记录页面弹窗</div>
                <div class="popup-grid">
                    <!-- 删除确认弹窗 -->
                    <div class="popup-card">
                        <div class="popup-card-title">
                            <i class="fas fa-question-circle text-yellow-500"></i>
                            删除确认弹窗
                        </div>
                        <div class="popup-card-desc">删除历史记录时显示的确认弹窗</div>
                        <div class="popup-preview">
                            <div class="bg-gray-800 rounded-xl p-4 w-full max-w-xs">
                                <div class="text-center mb-4">
                                    <i class="fas fa-exclamation-triangle text-yellow-500 text-xl mb-2"></i>
                                    <div class="text-xl font-bold mb-2 text-white">确认删除</div>
                                    <div class="text-sm text-gray-300">确定要删除选中的 3 条记录吗？</div>
                                </div>
                                <div class="flex justify-center space-x-4">
                                    <button class="px-4 py-2 bg-gray-700 rounded-lg text-sm font-medium hover:bg-gray-600 transition-all">取消</button>
                                    <button class="px-4 py-2 bg-blue-600 rounded-lg text-sm font-medium hover:bg-blue-500 transition-all">确定</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Toast提示弹窗 -->
                    <div class="popup-card">
                        <div class="popup-card-title">
                            <i class="fas fa-info-circle text-blue-500"></i>
                            Toast提示弹窗
                        </div>
                        <div class="popup-card-desc">操作完成后的简短提示信息</div>
                        <div class="popup-preview">
                            <div class="bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg">
                                删除成功
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>